<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="" prop="sampleTalentInfoId">
        <el-input v-model="queryParams.sampleTalentInfoId" placeholder="请输入达人信息表ID" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="" prop="sampleTalentPayId">
        <el-input v-model="queryParams.sampleTalentPayId" placeholder="请输入支付信息表ID" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="" prop="voucherScreenshot">
        <el-input v-model="queryParams.voucherScreenshot" placeholder="请输入凭证截图" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="" prop="transferScreenshot">
        <el-input v-model="queryParams.transferScreenshot" placeholder="请输入财务转账截图" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="" prop="invoiceScreenshot">
        <el-input v-model="queryParams.invoiceScreenshot" placeholder="请输入发票截图" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="" prop="noteLink">
        <el-input v-model="queryParams.noteLink" placeholder="请输入笔记链接" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="" prop="cooperativeQuotation">
        <el-input v-model="queryParams.cooperativeQuotation" placeholder="请输入合作报价" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <!-- <el-form-item label="逻辑删除;0=未删除；1=已删除" prop="isDelete">
        <el-input v-model="queryParams.isDelete" placeholder="请输入逻辑删除;0=未删除；1=已删除" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item>
        <el-radio-group v-model="state" size="small" fill="#66b1ff" @change="changeState">

          <el-radio :label="0">所有记录</el-radio>
          <el-radio :label="1">我的申请</el-radio>

        </el-radio-group>
      </el-form-item>
      <el-form-item>



        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> -->
      </el-form-item>
      <div>
        <el-form-item label="" prop="applyStatus">
          <!-- <el-input v-model="queryParams.applyStatus" placeholder="模板ID" clearable @keyup.enter.native="handleQuery" /> -->
          <el-radio-group v-model="queryParams.applyStatus" size="small" @change="changeTheme" fill="#66b1ff">
            <el-radio :label="null">所有状态</el-radio>
            <el-radio :label="'to_apply'">待申请</el-radio>
            <el-radio :label="'dingding_approval'">待钉钉审核</el-radio>
            <!-- <el-radio :label="'supervisor_approval'">待主管审核</el-radio> -->
            <!-- <el-radio :label="'product_supervisor'">待产品中心主管审批</el-radio> -->
            <!-- <el-radio :label="'manage_approval'">待经理审核</el-radio>
            <el-radio :label="'gm_approval'">待总经办审核</el-radio> -->
            <!-- <el-radio :label="'finance_approval'">待财务部审核</el-radio> -->
            <el-radio :label="'upload_invoice'">待上传发票</el-radio>
            <el-radio :label="'uploaded_invoice'">已上传发票</el-radio>
            <el-radio :label="'without_invoice'">无发票</el-radio>
            <!-- <el-radio :label="'to_signed'">待签收</el-radio>
          <el-radio :label="'signed'">已签收</el-radio>
          <el-radio :label="'to_returned'">待退货</el-radio>

          <el-radio :label="'returning'">退货中</el-radio>
          <el-radio :label="'returned'">已退样</el-radio>
          <el-radio :label="'not_return'">不归还</el-radio> -->
            <!-- <el-radio :label="'end'">结束</el-radio> -->

          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['product:samplePaymentApply:add']">新增</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['product:samplePaymentApply:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['product:samplePaymentApply:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['product:samplePaymentApply:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-plus" @click="ToDoapply">申请</el-button>
      </el-col>
      <!-- v-show="this.TypeCheck" -->
      <el-col :span="1.5" v-show="this.TypeCheck">
        <el-button size="mini" plain icon="el-icon-edit" @click="ToDo">我的待办</el-button>
      </el-col>
      <el-col :span="1.5" v-show="this.TypeCheck">
        <el-button size="mini" plain icon="el-icon-plus" @click="ToDoCheck">审批</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div ref="tableDom">
      <el-table v-loading="loading" :maxHeight="samplePaymentApplyList.length ? tableHeight : 'auto'"
        :data="samplePaymentApplyList" @selection-change="handleSelectionChange" @row-dblclick="t">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" align="center" prop="id" />
        <!-- <el-table-column label="达人信息表ID" align="center" prop="sampleTalentInfoId" width="110" />
      <el-table-column label="支付信息表ID" align="center" prop="sampleTalentPayId" width="110" /> -->
        <el-table-column label="申请状态" align="center" prop="applyStatus" width="140">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.applyStatus | state2
              }}
            </div>
            <div v-show="scope.row.applyStatus !== 'to_apply'"
              style="color: rgb(37, 137, 255); cursor: pointer; text-decoration: underline;"
              @click="statusList(scope.row)">
              流转记录
            </div>
          </template>
        </el-table-column>
        <el-table-column label="合作类型" align="center" prop="businessType">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.businessType | state1
              }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="平台名称" align="center" prop="platform" />
        <el-table-column label="昵称" align="center" prop="xhsNickname" width="130" />
        <el-table-column label="合作报价" align="center" prop="cooperativeQuotation" />
        <el-table-column label="凭证截图" align="center" prop="voucherScreenshot">
          <template slot-scope="scope">
            <image-preview :src="scope.row.voucherScreenshot" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="支付方式" align="center" prop="payMethod" />
        <el-table-column label="姓名" align="center" prop="payName" />
        <el-table-column label="支付账号" align="center" prop="payAccount" width="200" />
        <el-table-column label="收款码" align="center" prop="payImage" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.payImage" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="支付备注" align="center" prop="remark" />
        <el-table-column label="财务转账截图" align="center" prop="transferScreenshot" width="110">
          <template slot-scope="scope">
            <image-preview :src="scope.row.transferScreenshot" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="发票截图" align="center" prop="invoiceScreenshot">
          <template slot-scope="scope">
            <image-preview :src="scope.row.invoiceScreenshot" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="合作数据" align="center" prop="noteLink">
          <template slot-scope="scope">
            <div v-show="scope.row.businessType == 'note'"
              style="color: rgb(37, 137, 255); cursor: pointer; text-decoration: underline;"
              @click="getlistNote(scope.row)">
              笔记数据
            </div>
            <div v-show="scope.row.businessType == 'live'"
              style="color: rgb(37, 137, 255); cursor: pointer; text-decoration: underline;"
              @click="getliveList(scope.row)">
              直播数据
            </div>
          </template>
        </el-table-column>
        <el-table-column label="复盘附件" align="center" prop="reviewAttachment" />
        <!-- <el-table-column label="逻辑删除;0=未删除；1=已删除" align="center" prop="isDelete" /> -->
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['product:samplePaymentApply:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['product:samplePaymentApply:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog title="笔记链接" :visible.sync="noteApply" append-to-body width="80%">
      <el-table :data="noteList">
        <el-table-column label="发布时间" align="center" prop="releaseTime" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.releaseTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际价格" align="center" prop="realPrice" />
        <el-table-column label="合作款式" align="center" prop="productNoStr" width="160px" />
        <el-table-column label="发布链接" align="center" prop="publishLink" />
        <el-table-column label="是否带货笔记" align="center" prop="shippingNotes" />
        <el-table-column label="阅读量" align="center" prop="readingVolume" />
        <el-table-column label="CPC点击成本" align="center" prop="cpcCost" />
        <el-table-column label="爆文属性" align="center" prop="explosiveText" />
        <el-table-column label="点赞" align="center" prop="likeNum" />
        <el-table-column label="收藏" align="center" prop="collectNum" />
        <el-table-column label="评论数" align="center" prop="commentsNum" />
        <el-table-column label="互动总数" align="center" prop="interactionsNum" />
        <el-table-column label="CPE互动成本" align="center" prop="cpeCost" />
        <el-table-column label="互动率" align="center" prop="interactionRate" />
      </el-table>
    </el-dialog>






    <el-dialog title="直播链接" :visible.sync="LiveApply" append-to-body width="80%">
      <el-table :data="liveList">
        <el-table-column label="直播ID" align="center" prop="id" />
        <!--<el-table-column label="达人信息表ID" align="center" prop="sampleTalentInfoId" />
      <el-table-column label="模板id" align="center" prop="templateId" /> -->
        <el-table-column label="日期" align="center" prop="liveDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.liveDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="进度" align="center" prop="progress" />
        <el-table-column label="合作达人" align="center" prop="xhsNickname" width="130" />
        <el-table-column label="产品款式" align="center" prop="productNo" width="90px" />
        <el-table-column label="价格" align="center" prop="price" />
        <el-table-column label="机制" align="center" prop="mechanism" />
        <el-table-column label="坑位费" align="center" prop="pitLocationFee" />
        <el-table-column label="佣金" align="center" prop="commission" />
        <el-table-column label="销售件数" align="center" prop="salesQuantity" />
        <el-table-column label="GMV" align="center" prop="liveGmv" />
        <el-table-column label="ROI" align="center" prop="liveRoi" />
        <el-table-column label="是否结算" align="center" prop="isSettlement" />
        <!-- <el-table-column label="逻辑删除;0=未删除；1=已删除" align="center" prop="isDelete" /> -->
        <el-table-column label="备注" align="center" prop="remark" />
      </el-table>
    </el-dialog>

    <!-- 添加或修改样衣打款申请对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <!-- <el-form-item label="达人信息表ID" prop="sampleTalentInfoId">
          <el-input v-model="form.sampleTalentInfoId" placeholder="请输入达人信息表ID" />
        </el-form-item>

        <el-form-item label="支付信息表ID" prop="sampleTalentPayId">
          <el-input v-model="form.sampleTalentPayId" placeholder="请输入支付信息表ID" />
        </el-form-item>  v-show="transferNot"-->

        <el-form-item label="合作报价" prop="cooperativeQuotation">
          <el-input v-model="form.cooperativeQuotation" placeholder="请输入合作报价" type="textarea"
            :autosize="{ minRows: 2, maxRows: 10 }" />
        </el-form-item>
        <el-form-item label="凭证截图" prop="voucherScreenshot">
          <!-- <el-input v-model="form.voucherScreenshot" placeholder="请输入凭证截图" /> -->
          <el-upload ref="uploadvoucherScreenshot" :action="imgUpload.url" :headers="imgUpload.headers"
            list-type="picture-card" :on-change='changevoucherScreenshot' :file-list="filevoucherScreenshot" multiple
            :on-success="uploadvoucherScreenshot" :on-remove="voucherScreenshotRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div id="preview" @paste="handlevoucherScreenshot">
            <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
          </div>
        </el-form-item>

        <el-form-item label="财务转账截图" prop="transferScreenshot">
          <!-- <el-input v-model="form.transferScreenshot" placeholder="请输入财务转账截图" /> -->
          <el-upload ref="uploadtransferScreenshot" :action="imgUpload.url" :headers="imgUpload.headers"
            list-type="picture-card" :on-change='changetransferScreenshot' :file-list="filetransferScreenshot" multiple
            :on-success="uploadtransferScreenshot" :on-remove="transferScreenshotRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div id="preview" @paste="handletransferScreenshot">
            <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
          </div>
        </el-form-item>
        <el-form-item label="发票截图" prop="invoiceScreenshot">
          <!-- <el-input v-model="form.invoiceScreenshot" placeholder="请输入发票截图" /> -->
          <el-upload ref="uploadinvoiceScreenshot" :action="imgUpload.url" :headers="imgUpload.headers"
            list-type="picture-card" :on-change='changeinvoiceScreenshot' :file-list="fileinvoiceScreenshot" multiple
            :on-success="uploadinvoiceScreenshot" :on-remove="invoiceScreenshotRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div id="preview" @paste="handleinvoiceScreenshot">
            <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
          </div>
        </el-form-item>
        <!-- <el-form-item label="笔记链接" prop="noteLink">
          <el-input v-model="form.noteLink" placeholder="请输入笔记链接" type="textarea" :autosize="{ minRows: 2, maxRows: 12 }"
            :style="{ width: '100%' }" />
          
        </el-form-item> -->

        <!-- <el-form-item label="逻辑删除;0=未删除；1=已删除" prop="isDelete">
          <el-input v-model="form.isDelete" placeholder="请输入逻辑删除;0=未删除；1=已删除" />
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>





    <el-dialog :visible.sync="Visibleapply" append-to-body title="申请" width="500px" v-if="Visibleapply">

      <el-form ref="formApply" :model="formApply" :rules="rules" label-width="100px">
        <el-form-item label="申请理由" prop="remark">
          <el-input v-model="formApply.remark" placeholder="申请理由" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px;">
        <el-button type="primary" @click="submitApply">确 定</el-button>

        <el-button @click="cancelApply">取消</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="VisibleCheck" append-to-body title="审批" width="500px" v-if="VisibleCheck">

      <el-form ref="formCheck" :model="formCheck" :rules="rules" label-width="100px">
        <el-form-item label="是否同意" prop="isAgree">
          <!-- <el-input v-model="formCheck.isAgree" placeholder="是否同意" /> -->
          <!-- <el-button type="primary" @click="submitTrue">确 定</el-button>
  <el-button @click="submitFalse">取 消</el-button> -->
          <el-radio-group v-model="formCheck.isAgree" size="small" fill="#66b1ff">
            <el-radio :label="'true'">同意</el-radio>
            <el-radio :label="'false'">不同意</el-radio>
            <!-- <el-radio :label="null">所有</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="截图" prop=" checkPic">
          <el-input v-model="formCheck.checkPic" placeholder="截图" />
        </el-form-item> -->
        <el-form-item label="审批意见" prop="reason">
          <el-input v-model="formCheck.reason" placeholder="审批意见" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formCheck.remark" placeholder="备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px;">
        <el-button type="primary" @click="submitCheck">确 定</el-button>

        <el-button @click="cancelCheck">取消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改产品二级信息对话框 :on-change="handleChange"-->
    <el-dialog title="流转记录" :visible.sync="openApply" append-to-body>
      <el-table :data="ApplyList">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <!-- <el-table-column label="联系ID" align="center" prop="id" />
      <el-table-column label="达人信息表ID" align="center" prop="sampleTalentInfoId" /> -->
        <el-table-column label="办理节点" align="center" prop="nodeName" />
        <el-table-column label="办理人" align="center" prop="userName" />
        <el-table-column label="办理时间" align="center" prop="createTime" />
        <el-table-column label="审批意见" align="center" prop="reason" />

      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listLive, getLive, delLive, addLive, updateLive } from "@/api/sample/live";
import { listNote, getNote, delNote, addNote, updateNote } from "@/api/sample/note";
import { getInfo } from '@/api/login.js'
import { listSamplePaymentApply, getSamplePaymentApply, delSamplePaymentApply, addSamplePaymentApply, updateSamplePaymentApply, selectSampleTalentApplyToDo, SampleTalentApplyCheck, startApplyFlow, selectMySampleTalentApply, selectFlowInstanceRecordListExt } from "@/api/sample/samplePaymentApply";
//--------导入token
import { getToken } from "@/utils/auth";
export default {
  name: "SamplePaymentApply",
  data() {
    return {
      transferNot: true,
      tableHeight: '',
      noteApply: false,
      noteList: [],
      // 样衣直播合作表格数据
      liveList: [],
      LiveApply: false,
      TypeCheck: false,
      //我的申请
      state: 0,
      userId: '',
      //流程弹出框
      ApplyList: [],
      openApply: false,
      //申请按钮
      formApply: {},
      Visibleapply: false,
      //审批按钮
      VisibleCheck: false,
      formCheck: {},
      //选中get
      voucherScreenshotList: [],
      transferScreenshotList: [],
      invoiceScreenshot: [],
      createBy: [],
      to_apply: [],
      list: [],
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 图片数量限制
      limit: 2,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/common/upload",
      },
      //样品特殊图片
      voucherScreenshot: '',
      filevoucherScreenshot: [],

      //主搭配
      transferScreenshot: '',
      // fileLi: [{ url: "" }],
      filetransferScreenshot: [],
      //次搭配
      invoiceScreenshot: '',
      // file: [{ url: "" }],
      fileinvoiceScreenshot: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 样衣打款申请表格数据
      samplePaymentApplyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        applyId: null,
        sampleTalentInfoId: null,
        sampleTalentPayId: null,
        voucherScreenshot: null,
        transferScreenshot: null,
        invoiceScreenshot: null,
        noteLink: null,
        cooperativeQuotation: null,
        isDelete: null,
        applyStatus: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        sampleTalentInfoId: [
          { required: true, message: "达人信息表ID不能为空", trigger: "blur" }
        ],
        sampleTalentPayId: [
          { required: true, message: "支付信息表ID不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getroles()
    if (this.$route.query.id) {
      this.$set(this.queryParams, "sampleTalentInfoId", this.$route.query.id);
    }
    this.getList();
    // this.isCheck()
  },

  filters: {
    state1(string) {
      if (string == 'note') { return "笔记" };
      if (string == 'live') { return "直播" };
      if (string == 'VFU') { return "VFU" };
      // if (int == 2) { return "审批通过" };
    },
    state2(string) {
      if (string == 'to_apply') { return "待申请" };
      if (string == 'supervisor_approval') { return "待主管审核" };
      // if (string == 'product_supervisor') { return "待产品中心主管审批" };
      if (string == 'manage_approval') { return "待经理审核" };
      if (string == 'gm_approval') { return "待总经办审核" };
      if (string == 'finance_approval') { return "待财务部审核" };
      if (string == 'upload_invoice') { return "待上传发票" };
      if (string == 'uploaded_invoice') { return "已上传发票" };
      if (string == 'without_invoice') { return "无发票" };
      // if (string == 'to_signed') { return "待签收" };
      // if (string == 'signed') { return "已签收" };
      // if (string == 'to_returned') { return "待退货" };
      // if (string == 'returning') { return "退货中" };
      // if (string == 'returned') { return "已退样" };
      // if (string == 'not_return') { return "不归还" };
      if (string == 'end') { return "结束" };
      // if (int == 2) { return "审批通过" };

    },
  },

  mounted() {
    var _this = this
    this.resizeTable()
    window.onresize = function () {
      _this.resizeTable()
    }
  },
  //记得清空  如果在keepalive中 则使用activated  deactivated
  destroyed() {
    window.onresize = null
  },
  methods: {
    formatDatasampleTalentTemplateList(row) {
      let rowPerson = (row && row.sampleTalentTemplateList) || [];
      let arr = [];
      rowPerson.forEach(item => {
        //如果数据特别多的话,还可以在这里加if判断,仅展示规定的数据
        arr.push(item.productNo);
      });
      //
      return arr.join("/");
    },
    getlistNote(row) {
      // liveList: [],
      // LiveApply: false,
      listNote({ id: row.businessId }).then(response => {
        // console.log(JSON.stringify(response.data));
        if (response.rows.length <= 0) {
          this.$modal.msgError('暂无数据！')
          this.noteApply = false;
        } else {
          this.noteList = response.rows;
          this.noteApply = true;
        }

      });
    },
    getliveList(row) {
      // liveList: [],
      // LiveApply: false,
      listLive({ id: row.businessId }).then(response => {
        // console.log(JSON.stringify(response.data));
        this.liveList = response.rows;
        this.LiveApply = true;
      });
    },
    isCheck() {
      selectSampleTalentApplyToDo().then(res => {
        if (res.data.length > 0) {
          this.TypeCheck = true
        } else {
          this.TypeCheck = false
        }
      })
    },
    //我的待办
    ToDo() {
      selectSampleTalentApplyToDo().then(res => {
        this.samplePaymentApplyList = res.data
        this.total = this.sampleApplyList.length
      })

    },
    //是否审批
    ToDoCheck() {
      if (this.list.length == 0) {
        this.$modal.msgError('请选择一条记录信息！')
        return
      }
      this.VisibleCheck = true

    },
    cancelCheck() {
      this.VisibleCheck = false
    },
    submitCheck() {
      var check = []
      this.list.forEach(item => {
        check.push({ businessId: item.id, applyStatus: item.applyStatus, ...this.formCheck })
      })
      console.log(JSON.stringify(check));
      // return
      SampleTalentApplyCheck(check).then(response => {
        if (response.code == 200) {
          this.$modal.msgSuccess('申批成功')
          this.VisibleCheck = false
          this.ToDo()
        }
      })
    },
    //我的申请
    changeState(val) {
      console.log(this.queryParams.applyStatus);
      if (val == 1) {
        // selectMySampleTalentApply({ userId: this.userId, applyStatus: this.queryParams.applyStatus }).then(res => {
        //   this.samplePaymentApplyList = res.data
        // })
        this.queryParams.createBy = this.userId
        this.queryParams.applyId = this.userId
        this.getList({ applyId: this.userId, applyStatus: this.queryParams.applyStatus })
      } else if (val == 0) {
        this.queryParams = {}
        this.getList({ applyStatus: this.queryParams.applyStatus })
      }


    },
    //状态改变
    changeTheme(val) {
      console.log(val);
      if (this.state == 0) {
        this.getList({ applyStatus: val })
      } else if (this.state == 1) {
        // selectMySampleTalentApply({ userId: this.userId, applyStatus: val }).then(res => {
        //   this.samplePaymentApplyList = res.data
        // })
        this.queryParams.createBy = this.userId
        this.queryParams.applyId = this.userId
        this.getList({ applyId: this.userId, applyStatus: this.queryParams.applyStatus })
      }


    },
    //流转记录
    statusList(row) {
      selectFlowInstanceRecordListExt({ businessId: row.id, businessType: 'paymentApply' }).then(response => {
        this.ApplyList = response.data;
        this.openApply = true
      })

    },
    //申请按钮
    submitApply() {
      var apply = []
      this.list.forEach(item => {
        apply.push({ businessId: item.id, applyStatus: item.applyStatus })

      })
      startApplyFlow(apply).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess('申请成功')
          this.Visibleapply = false
          this.getList()
        }
      })

    },
    //判断是否打开申请
    ToDoapply() {
      console.log(1);
      if (this.to_apply.length == 0) {
        this.$modal.msgError('请选择至少一条待申请记录信息！')
        return
      }

      if (this.voucherScreenshot.indexOf(null) >= 0 || this.voucherScreenshot.indexOf('') >= 0) {
        this.Visibleapply = false
        this.$modal.msgError('请完善申请记录信息！凭证截图')
        return
      }

      if (this.transferScreenshot.indexOf(null) >= 0 || this.transferScreenshot.indexOf('') >= 0) {
        this.Visibleapply = false
        this.$modal.msgError('请完善申请记录信息！财务转账截图')
        return
      }

      if (this.invoiceScreenshot.indexOf(null) >= 0 || this.invoiceScreenshot.indexOf('') >= 0) {
        this.Visibleapply = false
        this.$modal.msgError('请完善申请记录信息！发票截图')
        return
      }


      if (this.to_apply.length == 1 && this.to_apply[0] == 'to_apply') {
        // this.Visibleapply = true
        if (this.createBy.length == 1 && this.createBy[0] == this.userId) {
          this.Visibleapply = true
        } else {
          this.Visibleapply = false
          this.$modal.msgError('请选择本人申请记录信息！')
          return

        }
      } else {
        this.Visibleapply = false
        this.$modal.msgError('包含非待申请记录信息！')
        return
      }


      // if(this.filter)
      // for (let index = 0; index < this.to_apply.length; index++) {
      //   // const element = array[index];

      // }

    },
    cancelApply() {
      this.Visibleapply = false
    },
    getroles() {
      // var userId = null
      getInfo().then(res => {
        console.log(JSON.stringify(res.user.userId));
        this.userId = res.user.userId
        // this.form.roleName = res.roles[0]

        // this.roleName = res.roles[0]
        // this.$forceUpdate()
        // this.$set(this.queryParams, "roleName", res.roles[0])
        // return res.roles[0]
        // this.$data.queryParams.roleName = res.roles[0]
      })

    },
    //点击某一行
    t(row, column, cell, event) {
      console.log(row, column, cell, event);
      this.handleUpdate(row)
    },
    /** 查询样衣打款申请列表 */
    getList() {
      this.loading = true;
      listSamplePaymentApply(this.queryParams).then(response => {
        this.samplePaymentApplyList = response.rows;
        console.log(JSON.stringify(this.samplePaymentApplyList));
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        sampleTalentInfoId: null,
        sampleTalentPayId: null,
        voucherScreenshot: null,
        transferScreenshot: null,
        invoiceScreenshot: null,
        noteLink: null,
        cooperativeQuotation: null,
        isDelete: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {}
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length

      this.list = selection.map(item => item)
      console.log(JSON.stringify(this.list));
      var createBy = selection.map(item => item.createBy)
      this.createBy = Array.from(new Set(createBy))
      console.log(JSON.stringify(this.createBy));


      var to_apply = selection.map(item => item.applyStatus)
      console.log(JSON.stringify(to_apply));
      // var apply = []
      // to_apply.forEach(item => {
      //   if (item.includes('to_apply')) {

      //     apply.push(item)
      //   }

      // })
      this.to_apply = Array.from(new Set(to_apply))



      console.log(JSON.stringify(this.to_apply));
      //凭证截图
      this.voucherScreenshot = selection.map(item => item.voucherScreenshot)
      console.log(JSON.stringify(this.voucherScreenshot));

      //财务转账截图
      this.transferScreenshot = selection.map(item => item.transferScreenshot)
      console.log(JSON.stringify(this.transferScreenshot));
      //发票截图
      this.invoiceScreenshot = selection.map(item => item.invoiceScreenshot)
      console.log(JSON.stringify(this.invoiceScreenshot));
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加样衣打款申请";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSamplePaymentApply(id).then(response => {
        this.form = response.data;
        console.log(JSON.stringify(response.data));
        // if (response.data.applyStatus == 'finance_approval') {
        //   this.transferNot = false
        // }
        //图片回显
        this.voucherScreenshot = response.data.voucherScreenshot
        this.transferScreenshot = response.data.transferScreenshot
        this.invoiceScreenshot = response.data.invoiceScreenshot
        this.filevoucherScreenshot = response.data.voucherScreenshot ? [
          { url: process.env.VUE_APP_BASE_API + response.data.voucherScreenshot }] : []//次搭配图片加的是这一行

        this.filetransferScreenshot = response.data.transferScreenshot ? [
          { url: process.env.VUE_APP_BASE_API + response.data.transferScreenshot }] : []//主图片加的是这一行
        // this.files = response.data.proTemplateSecondry.picUrl ? [
        //     { url: process.env.VUE_APP_BASE_API + response.data.proTemplateSecondry.picUrl }] : []//图片加的是这一行
        // this.fileList = response.data.proTemplateSecondry.logoUrl ? [
        //     { url: process.env.VUE_APP_BASE_API + response.data.proTemplateSecondry.logoUrl }] : []//logo图片加的是这一行
        this.fileinvoiceScreenshot = response.data.invoiceScreenshot ? [
          { url: process.env.VUE_APP_BASE_API + response.data.invoiceScreenshot }] : []//样品图片加的是这一行
        this.open = true;
        this.title = "修改样衣打款申请";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.voucherScreenshot = this.voucherScreenshot
      this.form.transferScreenshot = this.transferScreenshot
      this.form.invoiceScreenshot = this.invoiceScreenshot
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSamplePaymentApply(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSamplePaymentApply(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除样衣打款申请编号为"' + ids + '"的数据项？').then(function () {
        return delSamplePaymentApply(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('product/samplePaymentApply/export', {
        ...this.queryParams
      }, `samplePaymentApply_${new Date().getTime()}.xlsx`)
    },





    //voucherScreenshot图片
    handlevoucherScreenshot(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.filevoucherScreenshot.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return
      }
      this.$refs.uploadvoucherScreenshot.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadvoucherScreenshot.submit(); // 提交图片上传队列
    },
    //上传
    changevoucherScreenshot(file, fileList) {
      // this.fileList = fileList
      console.log('成功', file, fileList)
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.filevoucherScreenshot = fileList.slice(-1);

      }
    },
    voucherScreenshotRemove() {
      this.voucherScreenshot = ''
    },

    uploadvoucherScreenshot(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.voucherScreenshot = file.response.fileName

    },


    //次主推图片
    handletransferScreenshot(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.filetransferScreenshot.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return
      }
      this.$refs.uploadtransferScreenshot.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadtransferScreenshot.submit(); // 提交图片上传队列
    },
    //上传
    changetransferScreenshot(file, fileList) {
      // this.fileList = fileList
      console.log('成功', file, fileList)
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.filetransferScreenshot = fileList.slice(-1);

      }
    },
    transferScreenshotRemove() {
      this.transferScreenshot = ''
    },

    uploadtransferScreenshot(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.transferScreenshot = file.response.fileName

    },




    //主推图片
    handleinvoiceScreenshot(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.fileinvoiceScreenshot.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return
      }
      this.$refs.uploadinvoiceScreenshot.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadinvoiceScreenshot.submit(); // 提交图片上传队列
    },
    //上传
    changeinvoiceScreenshot(file, fileList) {
      // this.fileList = fileList
      console.log('成功', file, fileList)
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.fileinvoiceScreenshot = fileList.slice(-1);

      }
    },
    invoiceScreenshotRemove() {
      this.invoiceScreenshot = ''
    },

    uploadinvoiceScreenshot(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.invoiceScreenshot = file.response.fileName

    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null
      height = window.innerHeight - ref.getBoundingClientRect().top - bottomOffset
      return height
    },


    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100)
      }, 0)
    },
  }
};
</script>

<style lang="scss" scoped>
span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;

}
</style>